<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div class="container">
			<div class="first">第一个</div>
			<div class="second">第二个</div>
		</div>
	</body>
</html>

<script src="../../JQ/jquery-3.5.1.min.js"></script>
<script>
	$(function(){
		$(".first").wrap(function(){
			return '<div class="father" style="color:red"></div>'
		});
		$(".first").unwrap();
		$(".second").wrapAll("<div></div>")
		$(".first").wrapInner("<div class='child' style='color:red'></div>");
	})
</script>

<!--
wrap(html|element|fn)
把所有匹配的元素用其他元素的结构化标记包裹起来
$("p").wrap("<div class"warp"> </div>"); 把所有的段落用一个新建的DIV包裹起来

unwrap()
这个方法将移出元素的父元素
$("p").unwrap();移出段落P的父元素

wrapAll(html|ele) 
将所有匹配的元素用单个元素包裹起来
$("p").wrapAll("<div></div>"); 用一个生成div将所有的段落包裹起来

wrapInner(html|element|fnl)
将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$("p").wrapInner("<b></b>");把所有的段落里的每个子内容加粗
-->